<!DOCTYPE html>
<html style="font-size: 40px;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="layoutmode" content="standard">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="renderer" content="webkit">
		<meta name="wap-font-scale" content="no">
		<meta content="telephone=no" name="format-detection">
		<meta http-equiv="Pragma" content="no-cache">
		<script type="text/javascript">
			var _htmlFontSize = (function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body
					.clientWidth;
				if (clientWidth > 640) clientWidth = 640;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
				return clientWidth * 1 / 16;
			})();
		</script>
		<link rel="stylesheet" type="text/css" href="css/base.min.css" />
		<style>
			* {
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				margin: 0;
				-webkit-touch-callout: none;
				/* prevent callout to copy image, etc when tap to hold */
				-webkit-text-size-adjust: none;
				/* prevent webkit from resizing text to fit */
				/* make transparent link selection, adjust last value opacity 0 to 1.0 */
				-webkit-user-select: none;
				/* prevent copy paste, to allow, change 'none' to 'text' */
				/* -webkit-tap-highlight-color: rgba(0,0,0,0); */
			}

			html {
				height: 100%
			}

			input,
			textarea {
				-webkit-user-select: text
			}

			a {
				color: #000;
				padding: 0;
				text-decoration: none;
				cursor: pointer;
				font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma
			}

			video {
				width: 100%
			}

			input[type="radio"],
			input[type="checkbox"] {
				vertical-align: -2px
			}

			.main_box {
				position: relative;
				margin: 0 auto;
				width: 100%;
				height: 100%;
				background: #CD261D;
				background: url("https://www.17sucai.com/preview/506871/2017-06-20/prize/images/red-wrap.png") center no-repeat;
				background-size: cover;
				font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma
			}

			.main_box .box {
				width: 100%;
				padding-top: 45%;
				/*background: #CD261D;*/
				border-radius: 10px;
				-webkit-border-radius: 10px;
			}

			.main_box .box .bg_in {
				border-radius: 6px;
				-webkit-border-radius: 6px;
			}

			.main_box .box .bg_in .title {
				color: #fff;
				font-size: 0.9rem;
				text-align: center;
				padding: 0.25rem 0;
			}

			.main_box .box .content {
				z-index: 10;
				position: relative;
				width: 13rem;
				height: 6rem;
				margin: 0 auto 0 auto;
				background: #CD261D;
				border-radius: 6px;
				-webkit-border-radius: 6px;
			}

			#mask_img_bg {
				position: absolute;
				left: 0.2rem;
				top: 0.2rem;
				bottom: 0.2rem;
				right: 0.2rem;
				background: #fff;
				border-radius: 6px;
				-webkit-border-radius: 6px;
			}

			#mask_img_bg img {
				width: 5.3rem;
				height: 5.5rem;
				margin: 0 auto;
				display: block;
			}

			#redux {
				z-index: 22;
				position: absolute;
				padding: 0.2rem;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border-radius: 6px;
				-webkit-border-radius: 6px;
			}

			.main_box .hint-show {
				display: none;
				position: absolute;
				left: 50%;
				top: 6rem;
				width: 286px;
				height: 245px;
				margin-left: -143px;
				z-index: 99;
			}

			.main_box .hint-show .hint-img {
				width: 286px;
				height: 245px;
			}

			.main_box .hint-show .colour-img {
				width: 239px;
				height: 138px;
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -120px;
				z-index: 110;
			}

			.main_box .hint-show .prize-img {
				width: 116.5px;
				height: 121.5px;
				position: absolute;
				top: 74px;
				left: 50%;
				margin-left: -60px;
				z-index: 100;
			}

			.cont-span {
				display: block;
				width: 120px;
				height: 38px;
				text-align: center;
				position: absolute;
				top: 40%;
				left: 50%;
				margin-left: -60px;
				z-index: 10;
			}

			.main_box .hint-show .prize-span {
				display: block;
				width: 120px;
				height: 38px;
				text-align: center;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -60px;
				z-index: 100;
			}



			.main_box .hint-show .close {
				display: inline-block;
				width: 32px;
				height: 32px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 200;
			}

			.main_box .hint-show .btn {
				display: inline-block;
				width: 180px;
				height: 37px;
				position: absolute;
				bottom: 10px;
				left: 48px;
				z-index: 200;
			}

			.main_box .mask {
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 98;
			}

			.hint-num {
				width: 12.6rem;
				height: 1.2rem;
				line-height: 1.2rem;
				margin: 0 auto;
				background: rgba(0, 0, 0, 0.1);
			}

			.hint-num h4 {
				width: 100%;
				color: #fff;
				font-weight: 200;
				font-size: 0.6rem;

				text-align: center;
			}

			.hint-num h4 strong {
				color: #FFDB16;
			}
		</style>

	</head>

	<body class="main_box" style="background-color: #eee">
		<div class="box">
			<div class="bg_in">
				<div class="title">•&nbsp;刮奖区&nbsp;•</div>
			</div>
			<div class="content">
				<div id="mask_img_bg"><span class="cont-span"></span>
					<!--<img/>-->
				</div>
				<img id="redux" src="./img/layer.png" />
			</div>
			<!--次数-->
			<div class="hint-num">
				<h4>今日你还有 <strong class="clicknum">0</strong> 次刮奖机会</h4>
			</div>
		</div>
	<!-- 	<div class="hint-show">
			<img class="hint-img" src="images/hint.png">
			<img class="colour-img" src="images/colour.png">
			<span class="prize-span"></span>
			<a class="close"></a>
			<a class="btn"></a>
		</div> -->

		<div class="mask"></div>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="./img/ea.js"></script>
		<script type="text/javascript">
			$(window).load(function() {
				/*var imgarr = ["images/prize01.jpg", "images/prize02.jpg", "images/prize03.jpg", "images/prize04.jpg", "images/prize05.jpg", "images/prize06.jpg"];*/
				var imgarr = ["特等奖", "一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "谢谢参与"];
				var clickNum = 10;
				if (clickNum >= 1) {
					$('.clicknum').text(clickNum);
					$('#redux').eraser({
						size: 50, //设置橡皮擦大小
						completeRatio: .5, //设置擦除面积比例
						completeFunction: showResetButton //大于擦除面积比例触发函数
					});
					/*获取随机数*/
					var info = parseInt(Math.random() * 1000);
					var thanks;
					console.log(info)
					/*通过判断设置出现概率*/
					if (info == 1) {
						arrinfo = imgarr[0];
						thanks = true;
					} else if (info >= 2 && info <= 4) {
						arrinfo = imgarr[1];
						thanks = true;
					} else if (info >= 5 && info <= 9) {
						arrinfo = imgarr[2];
						thanks = true;
					} else if (info >= 10 && info <= 20) {
						arrinfo = imgarr[3];
						thanks = true;
					} else if (info >= 21 && info <= 40) {
						arrinfo = imgarr[4];
						thanks = true;
					} else if (info >= 41 && info <= 400) {
						arrinfo = imgarr[5];
						thanks = true;
					} else if (info >= 401) {
						arrinfo = imgarr[6];
						thanks = false;
					}
					//        $("#mask_img_bg>img").attr("src", arrinfo);
					$("#mask_img_bg>span").text(arrinfo);

					function showResetButton() {
						//            $(".prize-img").attr("src", arrinfo);
						$(".prize-span").text(arrinfo);
						if (thanks == true) {
							$(".main_box .hint-show,.main_box .mask").fadeIn(300)
						}
					}
					$(".main_box .mask,.main_box .hint-show .close,.main_box .hint-show .btn").click(function() {
						$(".main_box .hint-show,.main_box .mask").fadeOut(300);
					});
				} else {
					alert("123")
				}

			})
		</script>

	</body>

</html>
